<template>
  <div>
    <div ref="basicCanvas" style="height: 100%; width: 100%"></div>
  </div>
</template>

<script>
import { resize } from "./resize"
export default {
  mixins: [resize],
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    chartData: {
      type: Array,
      default: () => [[],[]],
    },
    title: {
      type: Array,
      default: () => ["21年", "22年"]
    }
  },
  watch: {
    chartData: {
      handler(val){
        this.initChart();
      },
      deep: true,
    },
  },
  created(){
    this.initChart();
  },
  methods: {
    async initChart(val) {
      await this.$nextTick();

      if(this.myChart) { this.myChart.dispose() };
      this.myChart = this.$echarts.init(this.$refs.basicCanvas);
      let max = Math.max(...this.chartData[0], ...this.chartData[1]),
          min = Math.min(...this.chartData[0], ...this.chartData[1]);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          // formatter: "{b} <br /> {a0}: {c0}" + "<br />{a1}: {c1}",
        },
        legend: {
          data: this.title,
        },
        grid: {
          left: "20px",
          right: "20px",
          // bottom: "0"
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          axisLabel: {
            interval: 0,
          },
          textStyle: {
            fontSize: "18px",
          }
        },
        yAxis: [
          {
            type: "value",
            max,
            // min: 0,
            // max: max > 0 ? max : 0,
            min: min > 0 ? 0 : min,
            splitLine: { show: false }, //去除网格线
            axisLabel: {
              formatter: "{value}%",
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          },
          {
            type: "value",
            max,
            // min: 0,
            // max: max > 0 ? max : 0,
            min: min > 0 ? 0 : min,
            splitLine: { show: false }, //去除网格线
            axisLabel: {
              formatter: "{value}%",
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
          }
        ],
        series: [
          {
            type: "line",
            name: this.title[0],
            color: "rgb(59,165,223)",
            smooth: true,
            yAxisIndex: 0,
            data: this.chartData[0],
            lineStyle: {
              normal: {
                color: "rgb(59,165,223)", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#000",
                  },
                  formatter: "{c}",
                },
              },
            },
          },
          {
            type: "line",
            name: this.title[1],
            color: "#c00000",
            smooth: true,
            yAxisIndex: 1,
            data: this.chartData[1],
            lineStyle: {
              normal: {
                color: "#c00000", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "bottom",
                  textStyle: {
                    color: "#000",
                  },
                  formatter: "{c}",
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>
